import { ILayoutEditor } from "./ILayout-editor";
import { LayoutStyles, Width } from "./layout-content-style";
import { LayoutContentType, LayoutElement, LayoutElementType } from "./layout-element";

export interface IToolBarItem{
    icon: string,
    displayName: string,
    iconText: string,
    title: string,
    className: string,
    type:LayoutElementType,
    contentTypeLabel:LayoutContentType,
    childCount:number
}

export class HeadingData{
    h:string ="3"
    data: string ="";

    static fromJson(json:any):HeadingData{
        json = typeof json === 'object' ? json : {};

        let item = new HeadingData();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["h"])
                this.h = _data["h"];
            if (_data["data"])
                this.data = _data["data"];
        }
    }
}

export class LayoutEditorHelper {
    
    private static DefaultStyleValueCache : {[ key : string]:LayoutStyles} = {};
    private static DefaultStyleStringValueCache : {[ key : string]:string} = {}; 

    static getDragingItem(menuItem:IToolBarItem, editor:ILayoutEditor): LayoutElement{
        if (menuItem.type === "Canvas") {
            return new LayoutElement("Canvas", "Canvas");
        }

        if (menuItem.type === "Grid") {
            return new LayoutElement("Grid", "Grid");
        }

        if (menuItem.type === "Row") {
            let row = new LayoutElement("Row", "Row");
            row.editor = editor;
            if (menuItem.childCount > 0) {
                let width = 12 / menuItem.childCount;
                for (let index = 0; index < menuItem.childCount; index++) {
                    let column = new LayoutElement("Column", "Column");
                    column.width = width;
                    row.addToChildren(column);
                }
            }
            return row;
        }

        if (menuItem.type === "Column") {
            return new LayoutElement("Column", "Column");
        }

        if (menuItem.type === "Content") {
            let content = new LayoutElement("Content", menuItem.contentTypeLabel);
            if (menuItem.contentTypeLabel === "Divider") {
                content.setItemData("<hr>");
                content.setItemHtml();
            }
            return content;
        }
    }

    
    private static InitStyleVal(item: LayoutElement, isMobile: boolean){
        let data = LayoutStyles.fromJs({});
        const type = item.contentTypeLabel;
   
        data.textColor.color = "#242424";

        if(type === "Image" || type === "Video"){
            data.textAlign.value = "center";
            data.width = new Width();
            data.width.value = 100;
        }else{
            data.textAlign.value = "left";
        }

        if(isMobile){
            data.padding.unit = 'rem';
            data.margin.unit = 'rem';
            data.lineHeight.unit = 'rem';
            data.fontSize.unit = 'rem';
        }else{
            data.padding.unit = 'px';
            data.margin.unit = 'px';
            data.lineHeight.unit = 'px';
            data.fontSize.unit = 'px';
        }

        if(isMobile){
            if(type === "Heading"){
                let json = LayoutEditorHelper.headingDataToJson(item);
                if(json.h === "1"){
                    data.margin.top = 0.525;
                }else{
                    data.margin.top = 0.45;
                }
            }

            if(type === "Html" || type === "Divider" || type === "Image" || type === "Video" || type === "Text"){
                data.margin.top = 0.3;
            }
        }else{
            if(type === "Heading"){
                let json = LayoutEditorHelper.headingDataToJson(item);
                if(json.h === "1" || json.h === "2"){
                    data.margin.top = 45;
                }else{
                    data.margin.top = 30;
                }
            }

            if(type === "Html" || type === "Divider" || type === "Image" || type === "Video" || type === "Text"){
                data.margin.top = 30;
            }
        }

        return data;
    }

    static getDefaultStyleValue(item:LayoutElement, isMobile: boolean): LayoutStyles{
        const key = this.getCacheKey(item, isMobile);
        let temp = LayoutEditorHelper.DefaultStyleValueCache[key];
        if(temp){
            return temp;
        }
        
        temp = LayoutEditorHelper.InitStyleVal(item, isMobile);
        LayoutEditorHelper.DefaultStyleValueCache[key] = temp;
        return temp;
    }

    private static getCacheKey(item:LayoutElement, isMobile: boolean): string{
        let key: string;
        if(item.contentTypeLabel === "Heading"){
            let json = LayoutEditorHelper.headingDataToJson(item);
            key  = item.contentTypeLabel + '-' + isMobile  + '-' + json.h;
        }else{
            key = item.contentTypeLabel + '-' + isMobile;
        }
        return key;
    }

    static getDefaultStyleStringValue(item:LayoutElement, isMobile: boolean): string{
        const key = this.getCacheKey(item, isMobile);

        let temp = LayoutEditorHelper.DefaultStyleStringValueCache[key];
        if(temp){
            return temp;
        }

        let tempPc = LayoutEditorHelper.getDefaultStyleValue(item, isMobile);
        temp = JSON.stringify(tempPc);
        LayoutEditorHelper.DefaultStyleStringValueCache[key] = temp;
        return temp;
    }


    static isMobileDevice(): boolean {
        return KTUtil.isMobileDevice();
    }

    static headingDataToJson(item:LayoutElement): HeadingData{
        if(item.headingData){
            return item.headingData;
        }

        LayoutEditorHelper.setHeadingData(item);
        return item.headingData;
    }
    static setHeadingData(item:LayoutElement){
        try{
            let data = JSON.parse(item.data);
            item.headingData = HeadingData.fromJson(data);
        }catch{
            item.headingData = HeadingData.fromJson({});
        }
    }
}